<template>
  <div class="chart-wrapper">
    <v-chart :option="chartOptions" autoresize />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import VChart from 'vue-echarts';

// 定义props
const props = defineProps({
  chartId: {
    type: String,
    required: true
  },
  options: {
    type: Object,
    default: () => ({})
  }
});

// 生成模拟数据
const generateData = () => {
  const hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a', '10a', '11a',
    '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p'];
  const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
  
  const data = [];
  for (let i = 0; i < 7; i++) {
    for (let j = 0; j < 24; j++) {
      data.push([j, i, Math.round(Math.random() * 10)]);
    }
  }
  
  return {
    hours,
    days,
    data
  };
};

const { hours, days, data } = generateData();

// 图表配置
const chartOptions = ref({
  title: {
    text: '热力图',
    left: 'center'
  },
  tooltip: {
    position: 'top'
  },
  grid: {
    height: '50%',
    top: '10%'
  },
  xAxis: {
    type: 'category',
    data: hours,
    splitArea: {
      show: true
    }
  },
  yAxis: {
    type: 'category',
    data: days,
    splitArea: {
      show: true
    }
  },
  visualMap: {
    min: 0,
    max: 10,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: '15%'
  },
  series: [{
    name: '访问量',
    type: 'heatmap',
    data: data,
    label: {
      show: false
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
});

// 将传入的options合并到默认配置
watch(() => props.options, (newOptions) => {
  if (newOptions) {
    Object.assign(chartOptions.value, newOptions);
  }
}, { immediate: true });
</script>

<style scoped>
.chart-wrapper {
  width: 100%;
  height: 100%;
}
</style> 